<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item.id"
      @click="$router.push({name:'CourseDetail',params:{courseId:item.id}})">
      <div class="image">
        <img :src="item.courseListImg" alt="课程封面">
      </div>
      <div class="main">
        <div class="title">{{item.courseName}}</div>
        <div class="brief">{{item.brief}}</div>
        <div class="teacher" v-if="item.teacherDTO">
          <span class="name">{{item.teacherDTO.teacherName}}</span>
          <span class="name">{{item.teacherDTO.position}}</span>
        </div>
        <div class="teacher" v-else>
          <span class="name">{{'讲师名'}}</span>
          <span class="name">{{'职位'}}</span>
        </div>
        <div class="footer">
          <div class="sale">
            <span class="discounts">￥{{item.discounts}}</span>
            <span class="sales">{{item.sales}}人购买</span>
          </div>
          <van-button type="default" size="mini">试看</van-button>
        </div>
      </div>
    </van-cell>
  </van-list>
</van-pull-refresh>
</template>

<script>
import { getCourses } from '@/services/course';

export default {
  name: 'CourseBox',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      queryData: {
        currentPage: 1,
        pageSize: 15,
        status: 1,
      },
    };
  },
  methods: {
    async onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      const { data } = await getCourses(this.queryData);
      console.log(data);
      if (data.code === '000000') {
        this.list.push(...data.data.records);
        this.queryData.currentPage += 1;
      }
      this.loading = false;

      if (data.data.records.length < this.queryData.pageSize) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.queryData.currentPage = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang='less' scoped>
.van-pull-refresh {
  margin: 10px 0;
  border-radius: 4px;
}
.van-cell__value {
  display: flex;
  font-size: 12px;
}

.van-cell__value .image {
  width: 78px;
  height: 104px;
}
.van-cell__value .image img {
  width: 100%;
  height: 100%;
}

.van-cell__value .main {
  padding-left: 12px;
  flex: 1;
}
.van-cell__value .main .title {
  font-size: 16px;
  color: #333;
}
.van-cell__value .main .brief {
  color: #666;
}
.van-cell__value .main span {
  padding: 1px 5px;
}
.van-cell__value .main .teacher span{
  color: #999;
  background-color: rgb(248, 249, 250);
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.discounts {
  color: #ff7452;
  font-size: 16px;
  font-weight: 700;
}
.sales {
  color: #999;
}
</style>
